<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>0.5Px模糊问题</title>
    <script src="../build/image2D.js"></script>

    <script>
        function drawerImage(ctx) {

            ctx.strokeStyle = '#000';
            ctx.lineWidth = 1;

            // 画正方形
            ctx.strokeRect(10, 10, 180, 180);

            // 画斜线
            ctx.beginPath();
            ctx.moveTo(20, 20);
            ctx.lineTo(100, 160);
            ctx.lineTo(180, 20);
            ctx.stroke();

        }
    </script>
</head>

<body>

    <span>SVG绘图效果</span>
    <svg width="200" height="200">
        <rect x='10' y='10' width='180' height='180' fill='none' stroke='#000'></rect>
        <path d="M20,20L100,160L180,20" fill='none' stroke='#000'></path>
    </svg>

    <span>优化后方案</span>
    <canvas width="200" height="200" id="canvas1"></canvas>
    <script>
        drawerImage($$('#canvas1').painter());
    </script>

    <span>原始效果</span>
    <canvas width="200" height="200" id="canvas2"></canvas>
    <script>
        drawerImage($$('#canvas2')[0].getContext('2d'));
    </script>

</body>

</html>
